<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">
</head>

<body>
    <div class="swiper">

    </div>
    <div class="website3">
        <div class="website3_item "></div>
        <div class="website3_item "></div>
        <div class="website3_item "></div>
        <div class="website3_item "></div>
    </div>
</body>
<script>
//  $(window).on('scroll', function() {
//     if ($(window).scrollTop() > 200) {
//         $('.navbar').addClass('animated slideInRight bounce delay-1s');
//     } else {
//         $('.navbar').removeClass('animated slideInRight bounce delay-1s');
//     } 
// });

var w=$(window).width()
if(w>768){
     $('.website3').waypoint(function(direction) {

        if (direction === 'down' && !$(this.element).hasClass('animated')) {
        
            $('.website3_item').each(function(k) {
                var el = $(this);

                setTimeout(function() {
                    el.addClass('fadeInLeft  animated');
                }, k * 400, 'easeInOutExpo');

            });
          
        }
    }, {
        offset: '600px'

    }); 
}
</script>

</html>

<style>
    body,div{
        box-sizing: border-box,
    }
body{
    width: 100%;
}
.swiper{
    height: 900px;
}
.website3{
    width: 100%;
    height: 200px;
    display: flex
}
.sm1,.website3_item{
    width: 25%;
    height: 100%;
    background: lightcoral;
}
.sm2,.website3_item{
    width: 25%;
    height: 100%;
    background: limegreen;
}
.sm3,.website3_item{
    width: 25%;
    height: 100%;
    background: lightseagreen;
}
.sm4,.website3_item{
    width: 25%;
    height: 100%;
    background: lightslategray;
}

</style>